<template>
    <div class="toolbox-form-box">
        <div class="toolbox-form-item" style="padding-left: 12px;">
            <a-form-model
                :id="randomId"
                class="form-model-big-box"
                ref="ruleForm"
                :model="form"
                :rules="rules"
                layout="inline"
            >
                <a-form-model-item ref="name" label="活动名称" prop="name">
                    <a-input
                        v-model="form.name"
                        placeholder="请输入活动名称"
                        @blur="() => {$refs.name.onFieldBlur();}"
                    />
                </a-form-model-item>
                <a-form-model-item label="活动区域" prop="region">
                    <a-select v-model="form.region" placeholder="请选择活动区域" style="width: 184px;">
                        <a-select-option value="区域1">区域1</a-select-option>
                        <a-select-option value="区域2">区域2</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="活动时间" required prop="date2">
                    <a-range-picker v-model="form.date2" style="width: 100%;" />
                </a-form-model-item>
                <a-form-model-item label="到场时间" required prop="date1">
                    <a-date-picker
                        v-model="form.date1"
                        style="min-width: 184px;"
                        show-time
                        type="date"
                        placeholder="请选择时间"
                    />
                </a-form-model-item>
                <a-form-model-item label="活动单位" required prop="date3">
                    <a-select
                        show-search
                        :value="form.date3"
                        placeholder="请输入活动单位"
                        style="width: 184px"
                        :default-active-first-option="false"
                        :show-arrow="false"
                        :filter-option="false"
                        :not-found-content="null"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="(item,index) in searchData" :key="item.id">
                        {{ item.text }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="活动类型" prop="type" class="form-item-flex-1">
                    <a-checkbox-group v-model="form.type">
                        <a-checkbox value="1" name="type">
                            在线1
                        </a-checkbox>
                        <a-checkbox value="2" name="type">
                            在线2
                        </a-checkbox>
                        <a-checkbox value="3" name="type">
                            线下1
                        </a-checkbox>
                        <a-checkbox value="4" name="type">
                            线下2
                        </a-checkbox>
                        <a-checkbox value="5" name="type">
                            推广
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-model-item>
                <a-form-model-item prop="resource" >
                    <span slot="label" style="flex:1;display: flex;justify-content: space-between;">
                        <span>资</span>
                        <span>源</span>
                    </span>
                    <a-radio-group v-model="form.resource">
                        <a-radio value="1">
                            资源1
                        </a-radio>
                        <a-radio value="2">
                            资源2
                        </a-radio>
                        <a-radio value="3">
                            资源3
                        </a-radio>
                        <a-radio value="4">
                            资源4
                        </a-radio>
                        <a-radio value="5">
                            资源5
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="即时送达" prop="delivery">
                    <div style="width: 184px;">
                        <a-switch v-model="form.delivery" placeholder="请输入即时送达"/>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="活动形式" prop="desc" class="form-item-flex-1">
                    <a-textarea 
                        style="max-width: 465px;"
                        v-model="form.desc"
                        :autosize="{ minRows: 3, maxRows: 10000 }"
                        placeholder="请输入活动形式"
                    ></a-textarea>
                </a-form-model-item>
                <a-form-model-item>
                    <div style="width: 80px;display: inline-block;"></div>
                    <a-button class="blue-btn" type="primary" @click="onSubmit('ruleForm')">验证表单</a-button>
                    <a-button style="margin-left: 10px;" @click="resetForm('ruleForm')">清空</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="toolbox-form-item">
            <a-form-model
                :id="randomId1"
                class="form-model-big-box form-model-big-box1"
                ref="ruleForm1"
                :model="form"
                :rules="rules"
                layout="inline"
            >
                <a-form-model-item ref="name" label="活动名称" prop="name">
                    <a-input
                        v-model="form.name"
                        placeholder="请输入活动名称"
                        @blur="() => {$refs.name.onFieldBlur();}"
                    />
                </a-form-model-item>
                <a-form-model-item label="活动区域" prop="region">
                    <a-select v-model="form.region" placeholder="请选择活动区域" style="width: 184px;">
                        <a-select-option value="区域1">区域1</a-select-option>
                        <a-select-option value="区域2">区域2</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="活动时间" required prop="date2">
                    <a-range-picker v-model="form.date2" style="width: 100%;" />
                </a-form-model-item>
                
                <a-form-model-item label="到场时间" required prop="date1">
                <a-date-picker
                    v-model="form.date1"
                    style="min-width: 184px;"
                    show-time
                    type="date"
                    placeholder="请选择时间"
                />
                </a-form-model-item>
                <a-form-model-item label="活动单位" required prop="date3">
                    <a-select
                        show-search
                        :value="form.date3"
                        placeholder="请输入活动单位"
                        style="width: 184px"
                        :default-active-first-option="false"
                        :show-arrow="false"
                        :filter-option="false"
                        :not-found-content="null"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="(item,index) in searchData" :key="item.id">
                        {{ item.text }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="活动类型" prop="type" class="form-item-flex-1">
                    <a-checkbox-group v-model="form.type" style="min-width: 184px;">
                        <a-checkbox value="1" name="type">
                            在线1
                        </a-checkbox>
                        <a-checkbox value="2" name="type">
                            在线2
                        </a-checkbox>
                        <a-checkbox value="3" name="type">
                            线下1
                        </a-checkbox>
                        <a-checkbox value="4" name="type">
                            线下2
                        </a-checkbox>
                        <a-checkbox value="5" name="type">
                            推广
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-model-item>
                <a-form-model-item prop="resource">
                    <span slot="label" style="flex:1;display: flex;justify-content: space-between;">
                        <span>资</span>
                        <span>源</span>
                    </span>
                    <a-radio-group v-model="form.resource" style="min-width: 184px;">
                        <a-radio value="1">
                            资源1
                        </a-radio>
                        <a-radio value="2">
                            资源2
                        </a-radio>
                        <a-radio value="3">
                            资源3
                        </a-radio>
                        <a-radio value="4">
                            资源4
                        </a-radio>
                        <a-radio value="5">
                            资源5
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="即时送达" prop="delivery">
                    <div style="width: 184px;">
                        <a-switch v-model="form.delivery" placeholder="请输入即时送达"/>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="活动形式" prop="desc" class="form-item-flex-1">
                    <a-textarea 
                        style="max-width: 465px;"
                        v-model="form.desc"
                        :autosize="{ minRows: 3, maxRows: 10000 }"
                        placeholder="请输入活动形式"
                    ></a-textarea>
                </a-form-model-item>
                <a-form-model-item>
                    <div style="width: 80px;display: inline-block;"></div>
                    <a-button class="blue-btn" type="primary" @click="onSubmit('ruleForm1')">验证表单</a-button>
                    <a-button style="margin-left: 10px;" @click="resetForm('ruleForm1')">清空</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import { CodeSandboxCircleFilled, ConsoleSqlOutlined } from '@ant-design/icons-vue';

export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            other: '',
            form: {
                name: '',
                region: undefined,
                date1: undefined,
                date2: undefined,
                date3: undefined,
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            rules: {
                name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
                region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
                date1: [{ required: true, message: '请选择时间', trigger: 'change' }],
                date2: [{ required: true, message: '请选择时间', trigger: 'change' }],
                type: [{ type: 'array', required: true, message: '请选择活动类型', trigger: 'change', } ],
                resource: [{ required: true, message: '请选择活动资源', trigger: 'change' },],
                desc: [{ required: true, message: '请输入活动形式', trigger: 'blur' }],
            },
            formLeftText:80,
            windowInnerWidth:window.innerWidth,
            randomId:'formModel'+new Date().getTime(),
            randomId1:'formModel1'+new Date().getTime(),
            searchData1:[{
                text:'xx南宁百会药业集团有限',
                id:1,
            },{
                text:'xx葛洪堂方略制药有限公司',
                id:2,
            },{
                text:'xx葛洪堂药业有限公司',
                id:3,
            },{
                text:'xx维威制药有限公司',
                id:4,
            },{
                text:'桂林南药股份有限公司',
                id:5,
            },{
                text:'桂林市龙昌药品连锁有限公',
                id:6,
            },{
                text:'桂林市龙昌药品连锁有限',
                id:7,
            },{
                text:'南宁市茂诚药品零售连锁有限责任公司康平药店',
                id:8,
            },{
                text:'桂林市龙昌药品连锁有限公司平乐乐安堂药房',
                id:9,
            },{
                text:'桂林市龙昌药品连锁有限公司兴安严关店',
                id:10,
            }],
            searchData:[{
                text:'xx南宁百会药业集团有限',
                id:1,
            },{
                text:'xx葛洪堂方略制药有限公司',
                id:2,
            },{
                text:'xx葛洪堂药业有限公司',
                id:3,
            },{
                text:'xx维威制药有限公司',
                id:4,
            },{
                text:'桂林南药股份有限公司',
                id:5,
            },{
                text:'桂林市龙昌药品连锁有限公',
                id:6,
            },{
                text:'桂林市龙昌药品连锁有限',
                id:7,
            },{
                text:'南宁市茂诚药品零售连锁有限责任公司康平药店',
                id:8,
            },{
                text:'桂林市龙昌药品连锁有限公司平乐乐安堂药房',
                id:9,
            },{
                text:'桂林市龙昌药品连锁有限公司兴安严关店',
                id:10,
            }]
        }
    },
    watch:{

    },
    mounted(){
        // ant-form-item-label
        // ant-form-item-required
        this.$nextTick(()=>{//表格所有标题样式
            this.getFormLabelStyle(this.randomId,0)
            this.getFormLabelStyle(this.randomId1,1)
        })
        //console.log('我在表单页')
    },
    methods:{
        getFormLabelStyle(id,val){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        //console.log(itemLabel[0].getElementsByTagName('label'))
                        if(val){
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:90px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;height: 32px;font-family:simHei;'
                        }else{
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:85px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;font-family:simHei;'
                        }
                    }
                }
            }
        },
        handleSearch(val){
            //console.log(val)
            if(!val){
                this.searchData = JSON.parse(JSON.stringify(this.searchData1))
                return false
            }
            let data = JSON.parse(JSON.stringify(this.searchData))
            this.searchData = []
            data.forEach((item,index)=>{
                if(item.text.indexOf(val) !== -1){
                    this.searchData.push(item)
                }
            })
        },
        handleChange(){

        },
        onSubmit(val) {
            this.$refs[val].validate(valid => {
                if (valid) {
                alert('submit!');
                } else {
                //console.log('error submit!!');
                return false;
                }
            });
        },
        resetForm(val) {
            this.$refs[val].resetFields();
        },
    }
}
</script>
<style lang="less">
.toolbox-form-box{
    display: flex;
    flex-wrap: wrap;
    .ant-form-item{
        // display: flex;
        // align-items: center;
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                background: #f0f5ff;
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    
}
</style>